import React, { useState } from 'react'
import { Card, Table, DatePicker, Input, Button } from 'antd'
import { PageHeaderWrapper } from "@ant-design/pro-layout";
const { RangePicker } = DatePicker;

const columns: any = [
    {
        title: '充值支付交易号',
        dataIndex: 'trade_no',
        render: (text: any) => text,
    },
    {
        title: '用户名',
        dataIndex: 'username',
        render: (text: any) => text,
    },
    {
        title: '充值金额',
        dataIndex: 'recharge_amount',
        render: (text: any) => text,
        align: "center",
    },
    {
        title: '是否支付',
        dataIndex: 'is_paid',
        render: (text: any) => text,
        align: "center",
    },
    {
        title: '支付方式',
        dataIndex: 'pay_way',
        align: "center",
        render: (text: any) => text
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        align: "center",
        render: (text: any) => text
    }
];

const data = [
    {
        key: '1',
        trade_no: '1212356566',
        username: '郭国聪',
        recharge_amount: '20.00',
        is_paid: '是',
        pay_way: '微信支付',
        created_at: '2020-12-20 12:20',
    },
    {
        key: '2',
        trade_no: '5345354353',
        username: '卧槽',
        recharge_amount: '450.00',
        is_paid: '是',
        pay_way: '微信支付',
        created_at: '2021-12-20 12:20',
    },
];

export default () => {
    const [selectedKeys, setSelectedKeys] = useState([]);
    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: (selectedRowKeys: any) => {
            setSelectedKeys(selectedRowKeys)
        },
    };

    const ToolBar = () => {
        return (
            <div style={{ color: "rgba(0, 0, 0, 0.6)", fontSize: "14px" }}>
                下单时间： <RangePicker style={{ marginRight: "10px" }} />
                订单号：<Input style={{ width: "220px", marginRight: "10px" }} placeholder="交易号" />
                用户：<Input style={{ width: "220px", marginRight: "10px" }} placeholder="用户" />
                <Button type="primary">搜索</Button>
            </div>
        );
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBar />}>
                <Table columns={columns} dataSource={data} rowSelection={rowSelection} />
            </Card>
        </PageHeaderWrapper>
    );
}